<template>
  <div id="news">
    <div class="tradetop">新闻公告</div>
      <div class="newslist" v-for="(item,index) in news" @click="newsdetail(item.id)" :key="index">
        <div class="box1"><span>{{item.add_time}}</span></div>
          <div class="box2">
            <div class="line"></div>
            <p class="title">{{item.title}}</p>
            <p class="content">{{item.zhaiyao}}</p>
          </div>
          <div class="box3"><img :src="item.img" alt=""></div>
      </div>
  </div>
</template>

<script>
export default {
  name: "news",
  data() {
    return {
      news: []
    };
  },
  created() {
    this.loadmes();
  },
  methods: {
    loadmes() {
      this.axios
        .post("Info/new_list")
        .then(({ data }) => {
          console.log(data);
          this.news = data.new;
          this.news.img = "http://sg.cnlingjing.cn/Public/" + data.new.img;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    newsdetail(id) {
      console.log(id);
      this.$router.push({ name: "newsdetail", query: { id: id } });
    }
  }
};
</script>

<style lang="scss">
#news {
  .tradetop {
    width: 100%;
    height: 55px;
    line-height: 65px;
    font-size: 13px;
    font-family: MicrosoftYaHei-Bold;
    color: rgba(0, 0, 0, 1);
    font-weight: 700;
    padding-left: 25px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(153, 153, 153, 1);
  }
  .newslist {
    cursor: pointer;
    width: 958px;
    height: 95px;
    margin: 0 auto;
    padding: 50px 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e1e1e1;
    .box1 {
      width: 100px;
      font-size: 16px;
      text-align: center;
      font-family: MicrosoftYaHei;
      color: rgba(0, 0, 0, 1);
    }
    .box2 {
      width: 610px;
      font-size: 16px;
      font-family: MicrosoftYaHei;
      color: rgba(0, 0, 0, 1);
      padding-left: 80px;
      padding-right: 40px;
      position: relative;
      p:nth-of-type(1) {
        font-size: 16px;
        font-family: MicrosoftYaHei-Bold;
        color: rgba(0, 0, 0, 1);
        line-height: 21px;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      p:nth-of-type(2) {
        font-size: 13px;
        font-family: MicrosoftYaHei;
        color: rgba(102, 102, 102, 1);
        line-height: 21px;
        margin-top: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .line {
        width: 50px;
        height: 2px;
        position: absolute;
        left: 10px;
        top: 10px;
        background: rgba(153, 153, 153, 1);
      }
      .message {
        width: 530px;
        font-size: 13px;
        margin: 0 30px;
        font-family: MicrosoftYaHei;
        color: rgba(102, 102, 102, 1);
        line-height: 21px;
      }
    }
    .box3 {
      width: 160px;
      height: 95px;
      margin-right: 10px;
      img {
        width: 100%;
      }
    }
  }
}
</style>
